<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>新闻资讯</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.css" media="all">
		<link rel="stylesheet" href="../../css/public.css" media="all">
		<style>
			body {
            	background-color: #ffffff;
        	}
    </style>
	</head>
	<body>
		<form class="layui-form layui-form-pane" lay-filter="myForm" id="app">
			<input type="hidden" :value="detail.id" id="id" name="id" />
			<div class="layui-col-xs12 layui-col-md12">
				<div class="layui-form-item" pane>
					<label class="layui-form-label">标题：</label>
					<div class="layui-input-block">
						<input v-model="detail.title" type="text" name="title" id="title" autocomplete="off" class="layui-input">
					</div>
				</div>
			</div>
			<div class="layui-col-xs12 layui-col-md12">
				<div class="layui-form-item" pane>
					<label class="layui-form-label">图片：</label>
					<div v-if="detail.picture" class="layui-input-block">
						<img id="pictureImg" style="width: 91px;height: 91px;" :src="detail.picture">
						<input type="hidden" :value="detail.picture" id="picture" name="picture" />
					</div>
					<div class="layui-input-block">
						<button type="button" class="layui-btn btn-theme" id="pictureUpload">
							<i class="layui-icon">&#xe67c;</i>上传图片
						</button>
					</div>
				</div>
			</div>

			<div class="layui-col-xs12 layui-col-md12">
				<div class="layui-form-item" pane>
					<label class="layui-form-label">内容：</label>
					<div class="layui-input-block">
						<textarea v-model="detail.content" name="content" id="content">请输入内容</textarea>
					</div>
				</div>
			</div>

			<div class="layui-form-item">
				<div class="layui-input-block" style="text-align: right;margin-right: 30px;">
					<button class="layui-btn btn-submit" lay-submit lay-filter="*">提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>

		<script src="../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
		<script src="../../js/lay-config.js?v=2.0.0" charset="utf-8"></script>
		<script src="../../js/utils.js" charset="utf-8"></script>
		<script src="../../js/validate.js" charset="utf-8"></script>
		<script src="../../js/vue.js" charset="utf-8"></script>
		<script>
			var vue = new Vue({
				el: '#app',
				data: {
					detail: {
						title: '',
						picture: '',
						content: '',
					}
				},
				updated: function() {
					layui.form.render('select', 'myForm');
				},
				computed: {},
				methods: {
					jump(url) {
						jump(url)
					}
				}
			})

			layui.use(['layer', 'element', 'carousel', 'jquery', 'form', 'upload', 'laydate', 'tinymce', 'http'], function() {
				var layer = layui.layer;
				var element = layui.element;
				var carousel = layui.carousel;
				var http = layui.http;
				var jquery = layui.jquery;
				var form = layui.form;
				var upload = layui.upload;
				var laydate = layui.laydate;
				var tinymce = layui.tinymce


				// 上传图片
				var pictureUpload = upload.render({
					//绑定元素
					elem: '#pictureUpload',
					//上传接口
					url: http.baseurl + 'file/upload',
					// 请求头
					headers: {
						Token: localStorage.getItem('Token')
					},
					// 允许上传时校验的文件类型
					accept: 'images',
					before: function() {
						//loading层
						var index = layer.load(1, {
							shade: [0.1, '#fff'] //0.1透明度的白色背景
						});
					},
					// 上传成功
					done: function(res) {
						console.log(res);
						layer.closeAll();
						if (res.code == 0) {
							layer.msg("上传成功", {
								time: 2000,
								icon: 6
							})
							var url = http.baseurl + 'upload/' + res.file;
							jquery('#picture').val(url);
							jquery('#pictureImg').attr('src', url)
							vue.detail.picture = url;
						} else {
							layer.msg(res.msg, {
								time: 2000,
								icon: 5
							})
						}
					},
					//请求异常回调
					error: function() {
						layer.closeAll();
						layer.msg("请求接口异常", {
							time: 2000,
							icon: 5
						})
					}
				});
				var edit = tinymce.render({
					elem: "#content",
					height: 600,
					images_upload_handler: function(blobInfo, succFun, failFun) {
						var xhr, formData;
						var file = blobInfo.blob(); //转化为易于理解的file对象
						xhr = new XMLHttpRequest();
						xhr.withCredentials = false;
						xhr.open('POST', http.baseurl + 'file/upload');
						xhr.setRequestHeader("Token", localStorage.getItem('Token')); //设置请求头
						xhr.onload = function() {
							var json;
							if (xhr.status != 200) {
								failFun('HTTP Error: ' + xhr.status);
								return;
							}
							json = JSON.parse(xhr.responseText);
							if (!json || typeof json.file != 'string') {
								failFun('Invalid JSON: ' + xhr.responseText);
								return;
							}
							succFun(http.baseurl + '/upload/' + json.file);
						};
						formData = new FormData();
						formData.append('file', file, file.name); //此处与源文档不一样
						xhr.send(formData);
					}
				}, (opt) => {

				});


				// 跨表计算
				if (http.getParam('corss')) {
					var obj = JSON.parse(localStorage.getItem('crossObj'));
					//form.val("myForm", obj);
					for (var key in obj) {
						vue.detail[`${key}`] = obj[`${key}`]
					}
				}


				// 提交
				form.on('submit(*)', function(data) {
					data = data.field;

					// 数据校验
					if (!data.title) {
						layer.msg('标题不能为空', {
							time: 2000,
							icon: 5
						});
						return false
					}
					if (!data.picture) {
						layer.msg('图片不能为空', {
							time: 2000,
							icon: 5
						});
						return false
					}
					var content = tinymce.get('#content').getContent()
					data.content = content;
					if (!data.content) {
						layer.msg('内容不能为空', {
							time: 2000,
							icon: 5
						});
						return false
					}

					// 跨表计算

					// 比较大小

					// 提交数据
					http.requestJson('news' + '/update', 'post', data, function(res) {
						layer.msg('提交成功', {
							time: 2000,
							icon: 6
						}, function() {
							window.parent.location.reload();
						});
					});

					return false
				});

				var id = http.getParam('id');
				http.request('news/info/' + id, 'get', {}, (res) => {
					form.val(res.data)
					vue.detail = res.data;
				})



			});
		</script>
	</body>
</html>
